<script setup>
import { useI18n } from 'vue-i18n'
import operationLog from './components/log/operationLog.vue'
import systemLog from './components/log/systemLog.vue'
import { useThemeVars } from 'naive-ui'

const themeVars = useThemeVars()

const value = ref('1')

const { t } = useI18n()
</script>

<template>
  <div
    :style="{ backgroundColor: themeVars.bodyColor, position: 'sticky', top: '0px', zIndex: 1000 }"
  >
    <n-tabs type="card" style="margin-top: 2px; padding: 0px 2px" v-model:value="value">
      <n-tab name="1" :tab="t('service.operationLog')"> </n-tab>
      <n-tab name="2" :tab="t('service.systemLog')"> </n-tab>
    </n-tabs>
  </div>
  <div class="mt-4">
    <operationLog v-show="value == 1" />
    <systemLog v-show="value == 2" />
  </div>
</template>

<style scoped></style>
